<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();

    var viewer = initCesium.initViewer('cesiumContainer');

    function addBillboardAndRectangle() {
        Sandcastle.declare(addBillboardAndRectangle);

        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-77, 40.5),
            billboard : {
                image : './img/igs/facility.gif',
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(5.5e6)
            },
            rectangle : {
                coordinates : Cesium.Rectangle.fromDegrees(-80.5, 39.7, -75.1, 42.0),
                height : 0.0,
                material : Cesium.Color.RED.withAlpha(0.5),
                outline : true,
                outlineColor : Cesium.Color.RED,
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(0.0, 5.5e6)
            }
        });
    }

    function addPointAndModel() {
        Sandcastle.declare(addPointAndModel);

        var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0);
        var heading = Cesium.Math.toRadians(135);
        var hpr = new Cesium.HeadingPitchRoll(heading, 0.0, 0.0);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        viewer.entities.add({
            position : position,
            orientation : orientation,
            point : {
                pixelSize : 10,
                color : Cesium.Color.YELLOW,
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(250.5)
            },
            model : {
                uri : '../data/models/GroundVehicle/GroundVehicle.glb',
                distanceDisplayCondition : new Cesium.DistanceDisplayCondition(0.0, 250.5)
            }
        });
    }

    Sandcastle.addToolbarMenu([{
        text : 'Billboard and Primitive',
        onselect : function() {
            addBillboardAndRectangle();
            Sandcastle.highlight(addBillboardAndRectangle);
        }
    }, {
        text : 'Point and Model',
        onselect : function() {
            addPointAndModel();
            Sandcastle.highlight(addPointAndModel);
        }
    }]);

    Sandcastle.reset = function () {
        viewer.camera.flyHome(0);
        viewer.entities.removeAll();
    };



</script>
</body>
</html>